<template>
	<view class="shopping_cart">
		<view class="cart_list_box" v-for="(item,index) in cartsList" :key="index">
			<view class="left_check_box w100 flex" @click="onStorePage(item.shop_id,item.shop_name)"
				v-if="cartsList[index].goods_list.length != 0">
				<label class="radio" @click.stop="storeSelect(index)">
					<radio color="#EBBE87" style="transform: scale(0.8);" value="r1" :checked="item.check" />
				</label>
				<view class="store_image_box">
					<image class="shop_img" :src="item.shop_img" mode=""></image>
				</view>
				<view class="store_name s26 familytow fblod">
					{{item.shop_name}}
				</view>
				<uni-icons type="forward" size="18" color="#000000"></uni-icons>
			</view>
			<uni-swipe-action ref="swipeAction">
				<uni-swipe-action-item v-for="(items, indexs) in item.goods_list" :right-options="items.select.options"
					:key="indexs" @change="swipeChange($event, index)" @click="swipeClick(item,index,indexs)">
					<view class="content-box flex" @click="goDetail(items.sku.id)">
						<view class="left_box_check" @click.stop="goodsSelect(index,indexs)">
							<label class="radio">
								<radio color="#EBBE87" style="transform: scale(0.8);" value="r1"
									:checked="items.checked" />
							</label>
						</view>
						<view class="goods_image">
							<image class="goods_img" :src="items.sku.thumbnail?items.sku.thumbnail:items.image_src" mode=""></image>
						</view>
						<view class="goods_detail">
							<view class="goods_name_box s26 family f500">
								{{spceType(items.title,items.sku.difference[0],items.sku.spec_type)}}
							</view>
							<view class="status_box s24 familythree f400">
								【已选】<text v-for="(sku,skuindex) in items.sku.difference" :key="skuindex">{{sku}}</text>
							</view>
							<view class="goods_price_box flex">
								<view class="price_txt s36">
									<text class="qian f500 s22">￥</text>
									{{getPrice(items.number,items.sku.price).toFixed(2)}}
								</view>
								<!-- <view class="huaxian_txt s24 f400">
									￥990
								</view> -->
								<view class="zen_jan flex">
									<view class="jan_box" @click.stop="goodsNumJian(index,indexs)">
										<view class="jan"></view>
									</view>
									<view class="num_txt s28 fblod familytow">
										{{items.number}}
									</view>
									<view class="jia_box s40 fblod txtali" @click.stop="goodsNumJia(index,indexs)">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="bottom_box w100 flex" :style="{height: type == true ? '166rpx' : '98rpx'}">
			<label class="radio" @click="bottomCheck">
				<radio color="#EBBE87" style="transform: scale(0.8);margin-top: 32upx;margin-left: 48rpx;" value="r1"
					:checked="storeCheck" />
			</label>
			<view class="bottom_all s28 family f500">
				全选
			</view>
			<view class="zong_money_txt s28 familythree f400" v-if="price1 != 0">
				总计:￥{{price1}}
			</view>
			<view class="submit_btn s32 familytow fblod txtali" @click="orderSubmit">
				提交订单
			</view>
		</view>
		<block v-if="cartListLength == 0">
			<view class="no_list_box">
				<image class="w100 h100" :src="icon.noCartsIcon" mode=""></image>
			</view>
			<view class="no_txt family s32 f500 txtali">
				购物车还是空的哦~
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				goodsNum: 1,
				storeCheck: false,
				type: null,
				goodsCheck: false,
				cartsList: [],
				price1: 0,
				cartListLength: null
			}
		},
		computed: {
			...mapState(['icon'])
		},
		watch: {
			cartsList: {
				handler(val) {
					this.price1 = 0
					this.cartsList.map((item, index) => {
						item.goods_list.map((items, indexs) => {
							items.checked ? this.price1 += this.getPrice(items.number, items.sku.price) : ''
							
						})
					})
					this.price1 = this.price1.toFixed(2)
				},
				deep: true
			}
		},
		onLoad() {
			this.type = this.bottomNav()
			this.getCartList()
			this.cartListLength = uni.getStorageSync('cartList').length
		},
		onReady() {
			uni.$on('update', res => {
				this.swipeClick({
					content: {
						text: '添加'
					}
				})
			})
		},
		methods: {
			// 算出总价格
			getPrice(number, price) {
				return Number(number) * Number(price)
			},
			// 获取购物车数据并且把店铺遍历出来在增加一个滑动删除按钮
			getCartList() {
				this.$request({
					url: 'cart/synchro',
					method: 'POST',
					data: {
						cart: ''
					}
				}).then(res => {
					if (res.statusCode == 200) {
						let list = {},
							goods = [],
							cartList = res.data.data;
						for (let i = 0; i < cartList.length; i++) {
							let cart = cartList[i]
							cart.checked = false
							const obj = {
								id: cart.goods_id,
								options: [{
									text: '删除',
									style: {
										backgroundColor: 'rgb(255,58,49)'
									}
								}],
							}
							this.$set(cart, 'select', obj)
							if (!list[cart.shop_id]) {
								goods.push({
									shop_id: cart.shop_id,
									shop_name: cart.shop_name,
									shop_img: cart.shop_avatar_src,
									goods_list: [cart],
									check: false
								});
								list[cart.shop_id] = cart
							} else {
								for (let i = 0; i < goods.length; i++) {
									let cartGoods = goods[i]
									if (cartGoods.shop_id == cart.shop_id) {
										cartGoods.goods_list.push(cart)
										break;
									}
								}
							}
						}
						this.cartsList = goods
					}
				})
			},
			// 跳转店铺首页 
			onStorePage(shopId, shopName) {
				let shopDetail = {
					shopname: shopName,
					id: shopId,
				}
				uni.navigateTo({
					url: '/pages/filePages/storePages/index'
				})
				this.$store.commit("getDataShop", shopDetail)
			},
			//底部全选
			bottomCheck() {
				this.price1 = 0
				this.storeCheck = !this.storeCheck
				this.cartsList.map((item, index) => {
					if (this.storeCheck) {
						item.check = true
						this.clickQie(item)
					} else {
						item.check = false
						this.clickQie(item)
					}
				})
			},
			clickQie(item) {
				let money = 0
				item.goods_list.map((items, indexs) => {
					if (this.storeCheck) {
						items.checked = true
						money += Number(items.sum)
					} else {
						items.checked = false
					}
				})
				this.storeCheck ? this.price1 += money : this.price1 = 0
			},
			// 商品购买数量减少/最少购买一件
			goodsNumJian(index, indexs) {
				let item = this.cartsList[index].goods_list[indexs]
				if (item.number == 1) {
					uni.showToast({
						title: "最少购买一件!",
						icon: 'none'
					})
				} else {
					item.number--
					this.$request({
						url: 'cart/storage',
						method: 'POST',
						data: {
							goods_id: item.goods_id,
							number: item.number,
							sku_id: item.sku_id,
							sum: item.sum,
							type: 'bcsub'
						}
					}).then(res => {
						return
					})
				}
			},

			// 商品购买数量增加
			goodsNumJia(index, indexs) {
				let item = this.cartsList[index].goods_list[indexs]
				this.$request({
					url: 'cart/storage',
					method: 'POST',
					data: {
						goods_id: item.goods_id,
						number: item.number + 1,
						sku_id: item.sku_id,
						sum: item.sum,
						type: 'bcadd'
					}
				}).then(res => {
					this.$request({
						url: 'product/stock',
						data: {
							sku_id: item.sku_id
						}
					}).then(res => {
						if (this.cartsList[index].goods_list[indexs].number + 1 > res.data.data) {
							uni.showToast({
								title: '别加了没了!',
								duration: 2000,
								icon: 'none'
							});
						} else {
							this.cartsList[index].goods_list[indexs].number++
						}
					})
				})
			},

			// 点击店铺按钮全选
			storeSelect(index) {
				let that = this,
					price = 0,
					flag = 0;
				that.cartsList[index].check = !that.cartsList[index].check
				that.cartsList[index].goods_list.forEach(item => {
					item.checked = that.cartsList[index].check
				})
				// 选择几个店铺和算出选中店铺下的全部商品价格
				for (let s of that.cartsList) {
					if (s.check) {
						flag++
						for (let m of s.goods_list) {
							if (m.checked) {
								price += Number(m.sum)
							}
						}
					}
				}
				that.price1 = price
				this.storeCheck = flag >= this.cartsList.length ? true : false
			},

			// 购物车提交
			orderSubmit() {
				let goodsData = []
				this.cartsList.map((item, index) => {
					item.goods_list.map((items, indexs) => {
						if (items.checked) {
							goodsData.push({
								goods_id: items.goods_id,
								number: items.number,
								sku_id: items.sku_id,
								shop_id: items.shop_id
							})
						}
					})
				})
				if (goodsData.length == 0) {
					this.$wanlshop.msg('请选择购买的商品!')
				} else {
					uni.navigateTo({
						url: `/pages/order/order?data=${JSON.stringify(goodsData)}&flag=${0}&type=${1}`
					})
				}
			},

			// 商品全选
			goodsSelect(index, indexs) {
				let flag = 0,
					that = this,
					price = 0,
					flag1 = 0;
				that.cartsList[index].goods_list[indexs].checked = !that.cartsList[index].goods_list[indexs].checked
				for (let s of that.cartsList[index].goods_list) {
					if (s.checked) {
						flag++
					}
				}
				that.cartsList[index].check = flag >= that.cartsList[index].goods_list.length ? true : false
				for (let k of that.cartsList) {
					if (k.check) {
						flag1++
					}
				}
				this.storeCheck = flag1 >= that.cartsList.length ? true : false
				// 算出选中几个商品和选中商品的价格相加
				that.cartsList.map((item, index) => {
					item.goods_list.map((items, indexs) => {
						if (items.checked) {
							price += Number(items.sum)
						}
					})
				})
				that.price1 = price
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id=' + id + '&type=0&sku_id='+id
				})
			},
			swipeChange(e, index) {
			},
			swipeClick(item, index, indexs) {
				let items = item.goods_list[indexs],
					data = {
						checked: items.checked,
						goods_id: items.goods_id,
						image: items.image,
						number: items.number,
						shop_id: items.shop_id,
						shop_name: items.shop_name,
						sku: items.sku,
						sku_id: items.sku_id,
						sum: items.sum,
						title: items.title
					},
					datas = [];
				datas.push(data)
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: res => {
						if (res.confirm) {
							this.cartsList[index].goods_list.splice(indexs, 1);
							this.$request({
								url: 'cart/storage',
								method: 'POST',
								data: {
									type: 'del',
									data: datas
								}
							}).then(res => {
								this.$store.dispatch('getCarList')
							})
						} else if (res.cancel) {
							return false
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.shopping_cart {
		overflow: hidden;
		padding-bottom: 200upx;

		.no_list_box {
			width: 600upx;
			height: 374upx;
			margin: 202upx auto;
			margin-bottom: 0;
		}

		.no_txt {
			color: #BCBFCF;
		}

		.bottom_box {
			background: #FFFFFF;
			box-shadow: 0upx -1upx 0upx 2upx rgba(0, 0, 0, 0.1);
			position: fixed;
			bottom: 0;

			.bottom_all {
				color: #999999;
				margin-top: 36upx;
			}

			.zong_money_txt {
				color: #000000;
				margin-top: 36upx;
				margin-left: 110upx;
			}

			.submit_btn {
				width: 240upx;
				height: 80upx;
				background: #EBBE87;
				border-radius: 40upx;
				line-height: 80upx;
				color: #FFFFFF;
				margin-top: 10upx;
				position: absolute;
				right: 30upx;
			}
		}

		.cart_list_box {
			width: 704upx;
			background: #FFFFFF;
			padding-left: 46upx;
			margin-top: 20upx;
			overflow: hidden;

			.left_check_box {
				height: 88upx;
				margin-top: 36upx;

				.store_image_box {
					width: 48upx;
					height: 48upx;
					border-radius: 80upx;
					margin-left: 6upx;

					.shop_img {
						width: 48upx;
						height: 48upx;
						border-radius: 80upx;
					}
				}

				.store_name {
					width: 312upx;
					height: 36upx;
					color: #333333;
					margin-left: 16upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 44upx;
				}

				/deep/ .uni-icons {
					margin-left: 186upx;
				}
			}

			.content-box {
				width: 750upx;
				height: 216upx;
				background: #FFFFFF;
				overflow: hidden;

				.left_box_check {
					overflow: hidden;
					margin-top: 80upx;
				}

				.goods_image {
					width: 162upx;
					height: 162upx;
					border-radius: 8upx;
					overflow: hidden;
					background: #999999;
					margin-top: 24upx;
					margin-left: 26upx;

					.goods_img {
						width: 162upx;
						height: 162upx;
						border-radius: 8upx;
					}
				}

				.goods_detail {
					margin-left: 34upx;
					margin-top: 24upx;

					.goods_name_box {
						width: 400upx;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.status_box {
						width: 408upx;
						height: 68upx;
						color: #666666;
						margin-top: 12upx;
					}
				}

				.goods_price_box {
					margin-top: 2upx;

					.price_txt {
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						color: #E4493A;

						.qian {
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							color: #E4493A;
						}
					}

					.huaxian_txt {
						margin-top: 10upx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						margin-left: 14upx;
						color: #999999;
					}

					.zen_jan {
						position: absolute;
						right: 30rpx;
						margin-top: 4rpx;

						.jan_box {
							width: 40upx;
							height: 40upx;
							.jan {
								width: 20upx;
								height: 4upx;
								background-color: #999999;
								margin: 50% auto;
							}
						}

						.num_txt {
							color: #000000;
							margin: 0 20upx 0 20upx;
						}

						.jia_box {
							width: 40upx;
							height: 40upx;
							color: #000000;
							line-height: 36upx;
						}
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #F4F5F9;
	}
</style>
